<template>
	<dt-main-body v-model="labelPosition">
		<div class="location">
		    <el-breadcrumb separator-class="el-icon-arrow-right">
		        <el-breadcrumb-item>
		            <i class="iconfont icon-home"></i>
		            管理中心
		        </el-breadcrumb-item>
		        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
		        <el-breadcrumb-item>订单设置</el-breadcrumb-item>
		    </el-breadcrumb>
		</div>
				
		<div class="content-box">
			<el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
				<el-tabs v-model="activeName" type="card">
					<el-tab-pane label="基本信息" name="info">
						<div class="tab-content">
							<el-form-item prop="taxType" label="税收费用类型">
								<el-radio-group v-model="model.taxType" @change="model.taxaMount=0">
									<el-radio-button :label="1">百分比</el-radio-button>
									<el-radio-button :label="2">固定金额</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="taxaMount" :rules="rules.taxaMountPercent" label="税收费用比例" v-if="model.taxType==1">
								<el-slider v-model="model.taxaMount" show-input :min="0" :max="100"></el-slider>
							</el-form-item>
							<el-form-item prop="taxaMount" :rules="rules.taxaMountAmount" label="税收费用金额" v-else-if="model.taxType==2">
								<el-input v-model="model.taxaMount" placeholder="必填，税收费用固定金额">
									<template slot="prepend">
										￥
									</template>
									<template slot="append">
										元
									</template>
								</el-input>
							</el-form-item>
							<el-form-item prop="confirmMsg" label="订单确认通知">
								<el-radio-group v-model="model.confirmMsg">
									<el-radio-button :label="0">关闭</el-radio-button>
									<el-radio-button :label="1">短信</el-radio-button>
									<el-radio-button :label="2">邮件</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="confirmCallindex" label="通知模板别名">
							    <el-input v-model="model.confirmCallindex" placeholder="必填，只允许英文数字下划线"></el-input>
							</el-form-item>
							<el-form-item prop="expressMsg" label="订单发货通知">
								<el-radio-group v-model="model.expressMsg">
									<el-radio-button :label="0">关闭</el-radio-button>
									<el-radio-button :label="1">短信</el-radio-button>
									<el-radio-button :label="2">邮件</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="expressCallindex" label="通知模板别名">
							    <el-input v-model="model.expressCallindex" placeholder="必填，只允许英文数字下划线"></el-input>
							</el-form-item>
							<el-form-item prop="completeMsg" label="订单完成通知">
								<el-radio-group v-model="model.completeMsg">
									<el-radio-button :label="0">关闭</el-radio-button>
									<el-radio-button :label="1">短信</el-radio-button>
									<el-radio-button :label="2">邮件</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="completeCallindex" label="通知模板别名">
							    <el-input v-model="model.completeCallindex" placeholder="必填，只允许英文数字下划线"></el-input>
							</el-form-item>
						</div>
					</el-tab-pane>
					<el-tab-pane label="物流API接口" name="express">
						<div class="tab-content">
							<el-form-item prop="kuaidiApi" label="物流接口地址">
								<el-input v-model="model.kuaidiApi" placeholder="快递100API地址"></el-input>
							</el-form-item>
							<el-form-item prop="kuaidiKey" label="物流接口Key">
								<el-input v-model="model.kuaidiKey" placeholder="快递100平台的授权Key"></el-input>
							</el-form-item>
							<el-form-item prop="kuaidiCust" label="物流接口密钥">
								<el-input v-model="model.kuaidiCust" placeholder="快递100平台的Customer"></el-input>
							</el-form-item>
							<el-form-item prop="kuaidiShow" label="物流内容格式">
								<el-radio-group v-model="model.kuaidiShow">
									<el-radio-button :label="0">JSON</el-radio-button>
									<el-radio-button :label="1">XML</el-radio-button>
									<el-radio-button :label="2">HTML</el-radio-button>
									<el-radio-button :label="3">文本</el-radio-button>
								</el-radio-group>
							</el-form-item>
							<el-form-item prop="kuaidiOrder" label="内容排序方式">
								<el-radio-group v-model="model.kuaidiOrder">
									<el-radio-button label="asc">从旧到新</el-radio-button>
									<el-radio-button label="desc">由新到旧</el-radio-button>
								</el-radio-group>
							</el-form-item>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
				
		<div class="footer-box">
			<div class="footer-btn">
				<el-button type="primary" @click="submitForm">确认保存</el-button>
				<el-button plain @click="$common.back()">返回上一页</el-button>
			</div>
		</div>
	</dt-main-body>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'info', //当前选项卡
				labelPosition: 'right',//表单对齐方式
				loading: false,
				model: {
					taxType: 0,
					taxaMount: 0,
					confirmMsg: 0,
					confirmCallindex: null,
					expressMsg: 0,
					expressCallindex: null,
					completeMsg: 0,
					completeCallindex: null,
					kuaidiApi: null,
					kuaidiKey: null,
					kuaidiCust: null,
					kuaidiShow: 0,
					kuaidiOrder: null
				},
				rules: {
					taxType: [
						{ type: 'number', required: true, min: 1, max: 2, message: '请选择税费类型', trigger: 'change' }
					],
					taxaMountPercent: [
						{ type: 'number', required: true, min: 0, max: 100, message: '请选择税费百分比', trigger: 'change' }
					],
					taxaMountAmount: [
						{ required: true, message: '请填写税费金额', trigger: 'blur' },
						{ pattern: /^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/, message: '请输入正确金额，可保留两位小数', trigger: 'blur' }
					],
					confirmMsg: [
						{ type: 'number', required: true, min: 0, max: 2, message: '请选择订单通知类型', trigger: 'change' }
					],
					confirmCallindex: [
						{ required: true, message: '请填写订单通知模板别名', trigger: 'blur' },
						{ pattern: /^[a-zA-Z0-9_]*$/, message: '只能是字母数字下划线', trigger: 'blur' }
					],
					expressMsg: [
						{ type: 'number', required: true, min: 0, max: 2, message: '请选择发货通知类型', trigger: 'change' }
					],
					expressCallindex: [
						{ required: true, message: '请填写发货通知模板别名', trigger: 'blur' },
						{ pattern: /^[a-zA-Z0-9_]*$/, message: '只能是字母数字下划线', trigger: 'blur' }
					],
					completeMsg: [
						{ type: 'number', required: true, min: 0, max: 2, message: '请选择订单完成通知类型', trigger: 'change' }
					],
					completeCallindex: [
						{ required: true, message: '请填写订单完成模板别名', trigger: 'blur' },
						{ pattern: /^[a-zA-Z0-9_]*$/, message: '只能是字母数字下划线', trigger: 'blur' }
					],
					kuaidiApi: [
						{ required: true, message: '请填写快递100API地址', trigger: 'blur' }
					],
					kuaidiKey: [
						{ required: true, message: '请填写快递100授权Key', trigger: 'blur' }
					],
					kuaidiCust: [
						{ required: true, message: '请填写快递100的Customer', trigger: 'blur' }
					],
					kuaidiShow: [
						{ type: 'number', required: true, min: 0, max: 3, message: '请选择物流跟踪返回格式', trigger: 'change' }
					],
					kuaidiOrder: [
						{ required: true, message: '请选择物流排序格式', trigger: 'change' }
					]
				}
			}
		},
		methods: {
			//初始化数据
			initData() {
				let _this = this; //当前页面
				_this.$api.request({
					url: '/admin/setting/orderconfig',
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						//赋值给model
						Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//提交表单
			submitForm() {
				let _this = this; //当前页面
				//多个表单验证
				const f1 = new Promise((resolve, reject) => {
					_this.$refs['editForm'].validate((valid) => {
						if (valid) resolve()
					});
				});
				Promise.all([f1]).then(() => {
					_this.$api.request({
						method: 'put',
						url: '/admin/setting/orderconfig',
						data: _this.model,
						successMsg: '订单设置已成功修改',
						beforeSend() {
						    _this.loading = true
						},
						success(res) {
							//可写回调处理
						},
						complete() {
						    _this.loading = false
						}
					});
				})
			},
		},
		created() {
			this.initData();
		}
	}
</script>